<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.div {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function drag(event){
	event.dataTransfer.setData("Text",event.target.id);
}
function dragover(event){
	event.preventDefault();
}
function drop(event){
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<iframe type="text/html" width="350px" height="70px" src="http://www.youtube.com/embed/WIONTiOTJbw" frameborder="0">
</iframe>

<video width="350px" height="70px" controls="controls">
	<source src="http://www.youtube.com/embed/WIONTiOTJbw" type="video/mp4">
	Your browser does not support the video tag.
</video>
<br/>

<div class="div" ondragover="dragover(event)" ondrop="drop(event)"></div>

<div class="div" ondragover="dragover(event)" ondrop="drop(event)"></div>

<br>
<img id="drag1" draggable="true" src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" ondragstart="drag(event)" height="70px" width="350px">
</body>
</html>
